<template>
	<view class="bottom">
		<view class="bottom-content">
			<view class="b-left">
				<icon class="icon-ly"></icon>
				<input type="text" placeholder-class="placeholder" placeholder="留言板" v-model="input" confirm-type="send" @confirm="confirm" />
			</view>
			<view class="b-right">
				<!-- <view class="r-item" @click="bindLike">
					<icon class="icon-like" :class="{ 'icon-like-active': detail.if_like == 1 }"></icon>
					<text :class="{ 'text-like': detail.if_like == 1 }">{{ detail.list.like ? detail.list.like : 0 }}</text>
				</view> -->
				<view class="r-item">
					<icon class="icon-kf"></icon>
					<text>客服</text>
					<button
						open-type="contact"
						class="ke_fu_img"
						session-from="邻家的猫"
						:send-message-title="detail.list.name"
						:show-message-card="true"
						:send-message-path="`/pages/buyDetail/buyDetail?id=${detail.list.id}&type=${4}`"
						@click="chatClick"
					></button>
				</view>
				<view class="r-item" @click="bindForwarding">
					<icon class="icon-fx"></icon>
					<text>分享</text>
				</view>
			</view>
		</view>
		<view class="black"></view>
	</view>
</template>

<script>
import { chatClick } from '@/api/index.js';
const app = getApp();
export default {
	props: {
		detail: {
			type: Object,
			default: () => {}
		}
	},
	data() {
		return {
			input: ''
		};
	},
	methods: {
		// 转发
		bindForwarding() {
			this.$emit('bindForwarding');
		},
		// 点赞
		bindLike() {
			this.$emit('like');
		},
		// 评论
		confirm() {
			console.log(this.input);
			this.$emit('confirm', this.input);
		},
		// 联系客服点击率
		async chatClick() {
			const res = await chatClick({
				openid: app.globalData.openid
			});
		}
	}
};
</script>

<style scoped lang="scss">
.bottom {
	width: 100%;
	position: fixed;
	left: 0;
	right: 0;
	bottom: 0;
	background: #ffffff;
	.bottom-content {
		width: 100%;
		height: 96rpx;
		padding: 0 30rpx;
		box-sizing: border-box;
		display: flex;
		align-items: center;
		justify-content: space-between;
		.b-left {
			width: 506rpx;
			height: 68rpx;
			background: #f1f2f6;
			border-radius: 4px;
			padding: 0 20rpx;
			box-sizing: border-box;
			display: flex;
			align-items: center;
			justify-content: space-between;
			.icon-ly {
				width: 36rpx;
				height: 36rpx;
				background: url(https://nabercat.oss-cn-hangzhou.aliyuncs.com/acat-xcx/detail-bottom-ly.png) no-repeat;
				background-size: cover;
				margin-right: 16rpx;
			}
			& > input {
				height: 100%;
				flex: 1;
			}
			/deep/.placeholder {
				font-size: 28rpx;
				font-family: PingFangSC-Medium, PingFang SC;
				font-weight: 500;
				color: #999999;
			}
		}
		.b-right {
			display: flex;
			align-items: center;
			.r-item {
				display: flex;
				flex-direction: column;
				align-items: center;
				position: relative;
				.ke_fu_img {
					position: absolute;
					width: 100%;
					height: 100%;
					top: 0;
					left: 0;
					opacity: 0;
				}
				& > icon {
					width: 44rpx;
					height: 44rpx;
				}
				& > text {
					font-size: 20rpx;
					font-weight: 400;
					color: #171717;
					line-height: 14px;
					margin-top: 2rpx;
				}
				.text-like {
					color: #fa8384;
				}
				.icon-like {
					background: url(https://nabercat.oss-cn-hangzhou.aliyuncs.com/acat-xcx/detail-bottom-like.png) no-repeat;
					background-size: cover;
				}
				.icon-fx {
					background: url(https://nabercat.oss-cn-hangzhou.aliyuncs.com/acat-xcx/detail-bottom-fx.png) no-repeat;
					background-size: cover;
				}
				.icon-like-active {
					background: url(https://nabercat.oss-cn-hangzhou.aliyuncs.com/acat-xcx/detail-bottom-like-active.png) no-repeat;
					background-size: cover;
				}
				.icon-kf {
					background: url(https://nabercat.oss-cn-hangzhou.aliyuncs.com/acat-xcx/icon-detail-kefu.png) no-repeat;
					background-size: cover;
				}
				&:nth-of-type(1) {
					margin-right: 48rpx;
				}
			}
		}
	}
	.black {
		height: 68rpx;
	}
}
</style>
